<template>
  <div class="steps">
    <div v-for="(item,i) of data" :key="i" @click="goStep(i+1)" class="step_item" :class="{active:tab_step==i+1,click:isNew!=1,noSet:isNew==1&&tab_step<i+1}">
      {{item}}<div class="mark"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "djTab",
  props: {
    data: {   //进度条标题
      type: Array,
      default: () => {
        return [];
      }
    },
    isNew: {  //是否为新建
      type: Number,
      default: 0
    },
    tab_step: {  //当前进度
      type: Number,
      default: 1
    }
  },
  data() {
    return {};
  },
  methods: {
    goStep(i) {
      this.$emit("goStep", i);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.steps {
  font-size: 18px;
  position: relative;

  .step_item {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
    border: 1px solid rgba(220, 223, 230, 1);
    border-right: transparent;
    box-shadow: 0px 3px 5px 0px rgba(195, 209, 204, 0.35);
    text-align: center;
    font-weight: bold;
    position: relative;
    color: #000;
    background: #fff;
  }
  .step_item:after {
    display: block;
    content: "";
    width: 35px;
    height: 35px;
    background: #fff;
    border: 1px solid rgba(220, 223, 230, 1);
    border-bottom: transparent;
    border-left: transparent;
    transform: rotateY(40deg) rotateZ(45deg);
    /* 定位 */
    position: absolute;
    right: -18px;
    top: 6px;
    z-index: 10;
  }
  .step_item .mark {
    position: absolute;
    background: transparent;
    width: 20px;
    height: 50px;
    right: -20px;
    top: 0;
    z-index: 20;
  }
  .step_item.active {
    color: #fff;
    background: #409eff;
  }
  .step_item.active:after {
    display: block;
    content: "";
    width: 35px;
    height: 35px;
    background: #409eff;
    border: 1px solid rgba(220, 223, 230, 1);
    border-bottom: transparent;
    border-left: transparent;
    transform: rotateY(40deg) rotateZ(45deg);
    /* 定位 */
    position: absolute;
    right: -18px;
    top: 6px;
    z-index: 10;
  }

  .step_item.noSet {
    color: rgba(172, 175, 180, 1);
    background: rgba(239, 242, 246, 1);
  }
  .step_item.noSet:after {
    display: block;
    content: "";
    width: 35px;
    height: 35px;
    background: rgba(239, 242, 246, 1);
    border: 1px solid rgba(220, 223, 230, 1);
    border-bottom: transparent;
    border-left: transparent;
    transform: rotateY(40deg) rotateZ(45deg);
    /* 定位 */
    position: absolute;
    right: -18px;
    top: 6px;
    z-index: 10;
  }
  .step_item.click {
    cursor: pointer;
  }
}
</style>